<template>
	<div class="flowcontainer">
		<div class="crumb">
			<span>当前位置：</span>
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>公司介绍</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div>
			<div class="left">
				<div class="top">
					<div class="titlebox">
						<p>出版类型</p>
					</div>
					<div class="contentbox">
						<div>
							<img src="@/assets/flow/wenxue.png" alt="/">
							<span>文学创作</span>
						</div>
						<div>
							<img src="@/assets/flow/jiaocai.png" alt="/">
							<span>教材教辅</span>
						</div>
						<div>
							<img src="@/assets/flow/xueshu.png" alt="/">
							<span>学术专著</span>
						</div>
					</div>
				</div>
				<div class="bottom">
					<div class="titlebox">
						<p>联系方式</p>
					</div>
					<div class="qrcode">
						<div>
							<!-- <img src="@/assets/flow/qr.png" alt=""> -->
							<img :src="codeImage" alt="" />
						</div>
						<span>微信扫描二维码联系客服</span>
					</div>
					<div class="contact">
						<p>联系电话</p>
						<span>{{name}} {{phone}}</span>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="title">
					<span>公司概况</span>
				</div>
				<div class="company">
					<div class="totaldesc">
						<span>中文出版集团北京图书报刊有限公司隶属于中文出版集团，是国内专业的图书出版代理单位。</span>
						<br />
						<span>本公司可为有图书出版需求的客户提供一站式服务，从选题申报、书号申请到编辑校对、排版设计、出版发行，均有专业的团队负责。</span>
					</div>
					<div class="introduce">
						<span class="healine">1.资源丰富</span>
						<span
							class="content">本公司具有丰富的品牌资源、作者资源和内容资源，出版范围涵盖人文社会科学、文学、少儿、自然科学、生活、艺术、教育等门类。另外，本公司可签订正规出版合同，可对公转账，并开具本单位正规发票。</span>
					</div>
					<div class="introduce">
						<span class="healine">2.管理机制</span>
						<span
							class="content">本公司具有丰富的出版经验和完善的管理体系，采用精细化运营模式，拥有“凝聚力强、创新力强、执行力强”的管理团队，能够系统调配各部门资源。在中国知网进行书稿检测，出版风险小，做到查重率可控；与出版社的沟通具体到专人负责，一对一沟通；出书事宜做到专人服务，售后无忧。</span>
						<div class="intr-img">
							<img src="@/assets/company/mechanism.png" alt="">
						</div>
					</div>
					<div class="introduce">
						<span class="healine">3.品牌宗旨</span>
						<span class="content">本公司宗旨为“致力中文学术著作传播、服务全球华人科研创新”，坚持出版质量第一、服务为上的原则，期待成为您最信赖的长期合作伙伴。</span>
					</div>

					<div class="introduce main-depart">
						<span class="healine">4.主要部门</span>
						<div class="depart-title">
							<span>市场部</span>
						</div>
						<ul>
							<li> 负责与作者沟通，了解客户基本需求和核心需求。</li>
							<li> 初步把控书稿质量，及时与作者沟通书稿问题。</li>
							<li> 监督执行图书出版流程，直到图书印刷完成、作者收到图书。</li>
							<li> 作者信息留存，为持续跟进后续工作提供保障，并与作者长期保持良好合作伙伴关系。</li>
						</ul>
						<div class="depart-content">
							<span>服务宗旨：良好的态度是与作者融洽交流的前提，优质的服务是与作者保持友好关系的基础。</span>
						</div>
						<div class="intr-img" style="display: none;">
							<img src="@/assets/company/department.png" alt="">
						</div>
						<div class="depart-title">
							<span>编辑部</span>
						</div>
						<ul>
							<li>信息采集，对社会上的各种信息进行收集、处理。</li>
							<li>选题策划，开发出版资源、设计选题。</li>
							<li> 组稿，发现、选择、组织作者完成作品创作。</li>
							<li>审稿，对稿件进行审读、评价，对可接受但需要修改的稿件提出修改要求和建议。</li>
							<li>编辑加工整理，提高已决定接受出版的稿件质量。</li>
							<li>整体设计，包括外部装帧设计和内文版式设计。</li>
							<li>审定发稿，将编辑加工整理好的稿件经审定后发往相关职能部门安排制作和复制。</li>
							<li>校对，坚持责任校对制度和“三校一读”制度，保证书刊校对质量。</li>
						</ul>

						<div class="intr-img2">
							<div><img src="@/assets/company/page1.png" alt="" /></div>
							<div><img src="@/assets/company/page2.png" alt="" /></div>
							<div><img src="@/assets/company/page3.png" alt="" /></div>
							<div><img src="@/assets/company/page4.png" alt="" /></div>
						</div>


					</div>


				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: localStorage.getItem('name'),
				phone: localStorage.getItem('phone'),
				stepDetailArr: [{
						title: '选题申请：',
						detail: '凡是非需要特审的选题，利用自身的出版通道，为客户快速通过选题审批，为客户出版节约时间成本。'
					},
					{
						title: '编辑校对：',
						detail: '有专业的编辑校对人员，为作者提供优质服务。客户可以给我们提供相应资料，我们的编辑人员会在最短时间内编辑整理成书稿。客户提供的书稿，我们的校对人员会做认真的校对修改，以确保能顺利通过出版社的校对质检（标准要求万分之一错误率）。另外，对外单独接文理科及纯英文书稿校对。'
					},
					{
						title: '申请书号：',
						detail: '准备完整的出版资料，以最短的时间内为客户拿到出版号（中国图书数据核字号：CIP）。对于部分着急出版的客户，我们还可以安排走书号加急申请通道。刊易代理申请的书号均为正规书号，均可从新闻出版总署官网查询核实。没有特殊说明，刊易全部安排的是单书号。对于不合规的丛书号，我们不会安排。（丛书号是一套书的书号，定价只能整套定价，不可以单独销售，所以对于部分机构将不同作者不同类型作品用一套书的名义，走丛书号方式出版，实际属于不合规行为）'
					},
					{
						title: '排版设计：',
						detail: '刊易有专业的排版设计人员。我们认真对待每一本书。排版主要软件使用ID软件。刊易有专业美工负责图书封面设计，不少案例在网站公开展示。广大作者可以认真对比，我们跟其他单位出版的图书封面，相信你能看到我们的认真。'
					},
					{
						title: '印刷出版：',
						detail: '刊易提供多种印刷服务。包括批量印刷（500本以上），也包括快印（1本起印）。作者出版目的不同，印刷量也不同。对于做纪念或评职称用书，通常印量都很少。刊易就可以安排单本起印的快印。作者按需定量。如果需要大量印刷，我们可以安排批量印刷。批量印刷通常是500册起印。单本均价便宜，但总成本较高。'
					},
				],
				order: '',                  // 排序，asc／desc
				orderField: '',             // 排序，字段
				page: 1,                    // 当前页码
				limit: 5,                  // 每页数
				total:1000,
				newBookList:[],
				
				// company
				corder:'',
				corderField:'',
				cpage:1,
				climit:5,
				companyInfo:[],
				codeImage:"",
			}
		},
		mounted() {
			this.getCompanyInfo()
		},
		methods: {
			getCompanyInfo() {
				this.$http.get(
					`/bookManagement/company/page?order=${this.corder}&orderField=${this.corderField}&page=${this.cpage}&limit=${this.climit}`
					).then((res) => {
					// console.log(res.data.data.list);
					this.companyInfo = res.data.data.list;
					this.codeImage = this.companyInfo[0].image;
				}).catch(() => {})
			},
		}
	}
</script>

<style scoped>
	.flowcontainer {
		width: 100%;
		height: 100%;
		min-height: 1130px;
		background: rgb(239, 242, 243);
	}

	.crumb {
		height: 50px;
		margin: 0 240px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.crumb span {
		color: rgb(3, 3, 3);
		font-family: PingFang SC;
		font-size: 18px;
		letter-spacing: 0px;
	}

	.flowcontainer>div:nth-child(2) {
		height: 100%;
		min-height: 1130px;
		display: flex;
		flex-direction: row;
		margin: 0 240px;

	}

	.left {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.left p {
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		font-size: 22px;
		line-height: 22px;
		letter-spacing: 0px;
		text-align: left;
		margin: 0;
		padding: 0;
	}

	.left .top {
		height: 300px;
		background-color: white;
		display: flex;
		flex-direction: column;
	}

	.left .top>div:first-child {
		flex: 1;
	}

	.titlebox {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left .top>div:last-child {
		flex: 2;
		border-top: 2px solid rgb(239, 242, 243);
	}

	.top .contentbox {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
	}

	.top .contentbox img {
		height: 80px;
		width: 80px;
	}

	.top .contentbox span {
		display: block;
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		font-size: 20px;
		font-weight: undefined;
		line-height: 30px;
		letter-spacing: 0px;
	}

	.left .bottom {
		height: 700px;
		background-color: white;
		margin-top: 20px;
		display: flex;
		flex-direction: column;
	}

	.bottom>div:first-child {
		flex: 1;
	}

	.bottom>div:last-child {
		flex: 2;
	}

	.qrcode {
		flex: 6;
		border-top: 2px solid rgb(239, 242, 243);
		border-bottom: 2px solid rgb(239, 242, 243);
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
	}

	.qrcode>div {
		background-color: rgb(239, 242, 243);
		margin: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.qrcode img {
		width: 300px;
		height: 300px;
	}

	.qrcode span {
		display: inline-block;
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		font-size: 20px;

		line-height: 30px;
		letter-spacing: 0px;
		text-align: center;
	}

	.contact {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
	}

	.contact p {
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		font-size: 30px;
		line-height: 44px;
		letter-spacing: 0px;
		text-align: left;
	}

	.contact span {
		display: inline-block;
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		font-size: 25px;
		line-height: 37px;
		letter-spacing: 0px;
		text-align: left;
	}

	/* *********************右侧**************************** */
	.right {
		flex: 3;
		margin-left: 20px;
		margin-bottom: 50px;
		background-color: white;
		display: flex;
		flex-direction: column;
	}

	.right .title {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title span {
		padding: 70px 0 30px 0;
		color: rgb(6, 63, 90);
		font-family: PingFang SC;
		font-size: 30px;

	}

	.right .company {
		flex: 1;
		padding: 0 40px;
	}

	.company .totaldesc {
		text-align: justify;
	}

	.company .totaldesc span {
		display: inline-block;
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		font-size: 20px;
		/* line-height: 30px; */
		letter-spacing: 0px;
		text-indent: 2em;
	}

	.introduce {
		margin-top: 30px;
		text-align: justify;
	}

	.introduce span {
		display: inline-block;

	}

	.introduce .healine {
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		letter-spacing: 0px;
		font-size: 22px;
		font-weight: bold;
	}

	.introduce .content {
		padding-top: 20px;
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		font-size: 20px;
		/* line-height: 30px; */
		letter-spacing: 0px;
		text-indent: 2em;
	}

	.intr-img {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30px;
	}

	.intr-img img {
		width: 660px;
		height: 551px;
	}

	.main-depart .depart-title {
		background: rgb(239, 242, 243);
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		font-size: 20px;
		/* line-height: 30px; */
		text-align: center;
		margin-top: 30px;
	}

	.depart-title span {
		padding: 10px 0;
		font-size: 22px;
		font-weight: bold;
	}

	.main-depart ul {
		padding: 20px 0 20px 10px;
		margin: 0;
	}

	.main-depart ul li {
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		font-size: 20px;
		/* line-height: 30px; */
		letter-spacing: 0px;
		text-align: justify;
		margin-left: 35px;
	}

	.main-depart .depart-content {
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		font-size: 20px;
		/* line-height: 30px; */
		letter-spacing: 0px;
		text-align: justify;
	}

	.main-depart .depart-content span {
		font-size: 20px;
	}

	.main-depart .intr-img img {
		width: 776px;
		height: 679px;
	}

	.intr-img2 {
		width: 100%;
		display: grid;
		grid-template-columns: auto auto;
		grid-gap: 25px;
		margin-bottom: 30px;
	}

	.intr-img2 div {
		flex-basis: 30%;
		background: rgb(239, 242, 243);
		    display: flex;
		    justify-content: center;
		    align-items: center;
	}

	.intr-img2 img {
		width: 455px;
		height: 455px;
		padding: 70px 20px;
	}
</style>

<style>
.el-breadcrumb__inner{
	font-size: 18px !important;
}
.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover {
    color: #24797d;
}
</style>
